<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import axios from 'axios'
import * as cheerio from 'cheerio'
import { getLastPathSegment,replaceUrl } from '@/utils/urlReplace'
import { saveImageSrcUrlDetail,ImageSrcUrlPage} from '@/api/ImageSrcUrl'


const formData = reactive({
  url: '/everia/2025/07/17/玖兒-國模-大尺度-私拍套圖-2024-10-set-06/',
  lambda: 'figure img',
  selectedAttributes: ['src', 'alt', 'class', 'id', 'style', 'title', 'loading', 'data-src', 'data-original'],
  title: '',
})


const availableAttributes = [
  { value: 'src', label: 'src' },
  { value: 'alt', label: 'alt' },
  { value: 'class', label: 'class' },
  { value: 'id', label: 'id' },
  { value: 'style', label: 'style' },
  { value: 'title', label: 'title' },
  { value: 'loading', label: 'loading' },
  { value: 'data-src', label: 'data-src' },
  { value: 'data-original', label: 'data-original' }
]

const resetImgAttributes = () => {
  formData.selectedAttributes = availableAttributes.map(attr => attr.value)
}

const imageList = ref([])
const loading = ref(false)
const progress = ref(0)
const selectedImages = ref([])
const pageSource = ref('')
const showSource = ref(false)
const rawImgTags = ref([])
const extractedImgTags = ref([])

// 添加分页相关的状态变量
const currentPage = ref(1)
const pageSize = ref(10)

// 计算当前页的标签
const paginatedTags = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return rawImgTags.value.slice(start, end)
})

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(rawImgTags.value.length / pageSize.value)
})

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page
}

// 添加选择器示例
const selectorExamples = [
  {
    label: '基础选择器', examples: [
      { value: 'img', description: '选择所有图片' },
      { value: 'figure img', description: '选择 figure 标签内的图片' },
      { value: '.gallery img', description: '选择 class 为 gallery 的元素内的图片' },
      { value: '#main img', description: '选择 id 为 main 的元素内的图片' }
    ]
  },
  {
    label: '属性选择器', examples: [
      { value: 'img[src*=".jpg"]', description: '选择 src 属性包含 .jpg 的图片' },
      { value: 'img[alt]', description: '选择带有 alt 属性的图片' },
      { value: 'img[width="800"]', description: '选择宽度为 800 的图片' }
    ]
  },
  {
    label: '组合选择器', examples: [
      { value: 'figure.gallery img', description: '选择 class 为 gallery 的 figure 标签内的图片' },
      { value: 'div.content img[src*=".png"]', description: '选择 class 为 content 的 div 内的 PNG 图片' }
    ]
  }
]

// 添加选择器语法提示
const selectorTips = [
  '使用空格分隔表示层级关系，如：figure img',
  '使用 . 表示 class，如：.gallery',
  '使用 # 表示 id，如：#main',
  '使用 [] 表示属性选择，如：[src*=".jpg"]',
  '使用 * 表示包含，如：[src*=".jpg"]',
  '使用 = 表示等于，如：[width="800"]'
]

// 过滤后的图片列表
const filteredImages = computed(() => {
  return imageList.value
})

const fetchImages = async () => {
  try {
    loading.value = true
    progress.value = 0
    imageList.value = []
    rawImgTags.value = []

    const response = await axios.get(formData.url)
    const $ = cheerio.load(response.data)

    // 保存页面源代码
    pageSource.value = response.data

    // 使用 lambda 表达式获取所有 img 标签
    const images = $(formData.lambda)
      .map((_, img) => {
        const $img = $(img)
        // 保存原始标签
        rawImgTags.value.push($.html(img))

        // 获取所有属性
        const attributes = {}
        Object.entries($img.attr()).forEach(([key, value]) => {
          if (formData.selectedAttributes.includes(key)) {
            attributes[key] = value
          }
        })

        // 获取原始图片路径
        const src = $img.attr('src')
        const dataSrc = $img.attr('data-src')
        const dataOriginal = $img.attr('data-original')

        // 优先使用 data-src 或 data-original，如果没有则使用 src
        const imageUrl = dataSrc || dataOriginal || src

        return {
          src: imageUrl,
          alt: $img.attr('alt') || '',
          attributes
        }
      })
      .get()

    const totalImages = images.length

    if (totalImages === 0) {
      ElMessage.warning('未找到图片')
      return
    }

    // 处理图片 URL
    imageList.value = images.map(img => {
      const fullSrc = img.src.startsWith('http') ? img.src : new URL(img.src, formData.url).href
      return {
        src: fullSrc,
        alt: img.alt,
        attributes: img.attributes,
        index: images.indexOf(img) + 1,
      }
    })

    ElMessage.success(`成功获取 ${imageList.value.length} 张图片`)
  } catch (error) {
    console.error('获取图片失败:', error)
    ElMessage.error('获取图片失败：' + (error.response?.data || error.message))
  } finally {
    loading.value = false
    progress.value = 0
  }
}

const saveImageDetailList =  async () => {
    let title ;
    if (formData.title !==  ''){
      title = formData.title
    } else {
      title = getLastPathSegment(formData.url)
    }

    let list = imageList.value.map(img => {
      return {
        title: img.alt === '' ? title : img.alt,
        imageIndex: img.index,
        src: img.src,
        alt: img.alt,
        href: img.href
      }
    })
    const res = await saveImageSrcUrlDetail(list);
    if (res.code === 200){
      ElMessage.success('保存成功')
    } else {
      ElMessage.error('保存失败：' + res.message)
    }
}

const downloadImage = async (imageUrl) => {
  try {
    if (!imageUrl) {
      ElMessage.warning('图片 URL 不能为空')
      return
    }
    const downloadurl = replaceUrl(imageUrl);
    const response = await axios.get(downloadurl, {
      responseType: 'blob',
      headers: {
        'Accept': 'image/*'
      }
    })

    if (!response.data || response.data.size === 0) {
      throw new Error('下载的图片数据为空')
    }

    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', imageUrl.split('/').pop())
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    ElMessage.success('下载成功')
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('下载失败：' + (error.response?.data || error.message))
  }
}

const batchDownload = async () => {
  if (selectedImages.value.length === 0) {
    ElMessage.warning('请选择要下载的图片')
    return
  }

  try {
    loading.value = true
    progress.value = 0

    for (let i = 0; i < selectedImages.value.length; i++) {
      const image = selectedImages.value[i]
      await downloadImage(image.src)
      progress.value = Math.round(((i + 1) / selectedImages.value.length) * 100)
    }

    ElMessage.success('批量下载完成')
  } catch (error) {
    ElMessage.error('批量下载失败：' + error.message)
  } finally {
    loading.value = false
    progress.value = 0
  }
}


const copySource = () => {
  if (!pageSource.value) return

  navigator.clipboard.writeText(pageSource.value)
    .then(() => {
      ElMessage.success('源代码已复制到剪贴板')
    })
    .catch(() => {
      ElMessage.error('复制失败，请手动复制')
    })
}

const copyTag = (tag) => {
  navigator.clipboard.writeText(tag)
    .then(() => {
      ElMessage.success('标签已复制到剪贴板')
    })
    .catch(() => {
      ElMessage.error('复制失败，请手动复制')
    })
}

const copyAllTags = (tags) => {
  const allTags = tags.join('\n\n')
  navigator.clipboard.writeText(allTags)
    .then(() => {
      ElMessage.success('所有标签已复制到剪贴板')
    })
    .catch(() => {
      ElMessage.error('复制失败，请手动复制')
    })
}

// 添加从源代码提取 img 标签的功能
const extractImgTagsFromSource = () => {
  if (!pageSource.value) return

  const $ = cheerio.load(pageSource.value)
  extractedImgTags.value = $('img')
    .map((_, img) => $.html(img))
    .get()

  if (extractedImgTags.value.length === 0) {
    ElMessage.warning('未在源代码中找到 img 标签')
  } else {
    ElMessage.success(`成功提取 ${extractedImgTags.value.length} 个 img 标签`)
  }
}

// 添加解析 img 标签 src 的函数
const getImgSrc = (tag) => {
  const $ = cheerio.load(tag)
  return $('img').attr('src') || ''
}

// 添加全选功能
const selectAllImages = () => {
  if (selectedImages.value.length === filteredImages.value.length) {
    selectedImages.value = []
  } else {
    selectedImages.value = [...filteredImages.value]
  }
}

// 修改弹窗相关状态，拆分为两个独立的弹窗
const sourceDialogVisible = ref(false)
const tagsDialogVisible = ref(false)

// 添加打开已有网址列表
const imagesUrlListDialog = ref( false)

// 添加打开源代码弹窗方法
const openSourceDialog = () => {
  sourceDialogVisible.value = true
}

// 添加打开标签弹窗方法
const openTagsDialog = () => {
  tagsDialogVisible.value = true
}

const openImagesUrlListDialog = () => {
  imagesUrlListDialog.value = true
}

const urlListParams = {
  page: 1,
  pageSize: 10,
  sort: 'desc',
  sortField: 'createTime',
  url: '',
  totalPages: 0,
}

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '图片描述',
    dataIndex: 'alt',
    key: 'alt',
  },
  {
    title: '图片链接',
    dataIndex: 'href',
    key: 'href',
  },
  {
    title: '页面标识',
    dataIndex: 'page',
    key: 'page',
  }
]

const imageUrlList = ref([])

const handleRowClick = (row) => {
  const url = replaceUrl( row.href)
  formData.url = url
  formData.title = row.alt
  imagesUrlListDialog.value = false

}

const handleSizeChange = (val) => {
  urlListParams.pageSize = val
  fetchImagesList()
}

const handleCurrentChange = (val) => {
  urlListParams.page = val
  fetchImagesList()
}

const fetchImagesList = async () => {
  loading.value = true
  try {
    const page = {
      pageNum: urlListParams.page,
      pageSize: urlListParams.pageSize,
      params: formData,
      orderBy: formData.orderBy,
      order: formData.order
    }
    const response = await ImageSrcUrlPage (page)
    imageUrlList.value = response.list
    urlListParams.totalPages = response.total
  } catch (error) {
    console.error('Error fetching images:', error)
  } finally {
    loading.value = false
  }
}

</script>

<template>
  <div class="image-crawler-container">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span>图片采集配置</span>
        </div>
      </template>

      <el-form :model="formData" label-width="120px">
        <el-form-item label="目标网址">
          <el-input v-model="formData.url" placeholder="请输入要采集的网址" style="width: 80%; margin-right: 10px"/>
          <el-button type="primary" @click="openImagesUrlListDialog">查询已有网址</el-button>
        </el-form-item>

        <el-form-item label="选择器语法">
          <div class="selector-input-container">
            <el-input v-model="formData.lambda" placeholder="请输入 cheerio 选择器表达式" class="selector-input">
              <template #append>
                <el-popover placement="bottom" :width="300" trigger="click">
                  <template #reference>
                    <el-button>
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-button>
                  </template>
                  <div class="selector-help">
                    <h4>选择器语法提示</h4>
                    <ul class="tips-list">
                      <li v-for="(tip, index) in selectorTips" :key="index">
                        {{ tip }}
                      </li>
                    </ul>
                  </div>
                </el-popover>
              </template>
            </el-input>

            <el-popover placement="bottom" :width="400" trigger="click">
              <template #reference>
                <el-button type="primary" plain>
                  选择器示例
                </el-button>
              </template>
              <div class="selector-examples">
                <el-tabs>
                  <el-tab-pane v-for="category in selectorExamples" :key="category.label" :label="category.label">
                    <div class="example-list">
                      <div v-for="example in category.examples" :key="example.value" class="example-item"
                        @click="formData.lambda = example.value">
                        <div class="example-value">{{ example.value }}</div>
                        <div class="example-description">{{ example.description }}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-popover>
          </div>
        </el-form-item>

        <el-form-item label="图片属性">
          <div class="attributes-config">
            <el-checkbox-group v-model="formData.selectedAttributes">
              <el-checkbox v-for="attr in availableAttributes" :key="attr.value" :value="attr.value">
                {{ attr.label }}
              </el-checkbox>
            </el-checkbox-group>
            <el-button type="primary" size="small" @click="resetImgAttributes">
              重置属性
            </el-button>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="fetchImages" :loading="loading">
            开始采集
          </el-button>
          <el-button type="primary" @click="loading = false" >
            停止采集
          </el-button>

          <el-button type="primary" @click="openTagsDialog">
            生成标签
          </el-button>

          <el-button type="primary"  @click="openSourceDialog">
            查看源代码
          </el-button>

          <el-button type="primary" @click="saveImageDetailList">
            保存解析记录
          </el-button>
        </el-form-item>
      </el-form>

      <el-progress v-if="loading" :percentage="progress" :format="(percentage) => '采集进度: ' + percentage + '%'" />
    </el-card>

    <!-- 添加网页源代码展示卡片 -->

    <el-card class="result-card" v-if="filteredImages.length > 0">
      <template #header>
        <div class="card-header">
          <span>采集结果 ({{ filteredImages.length }}张图片)</span>
          <div class="header-actions">
            <el-button type="primary" plain size="small" @click="selectAllImages">
              全选
            </el-button>
            <el-button type="primary" @click="batchDownload" :disabled="selectedImages.length === 0">
              批量下载 ({{ selectedImages.length }})
            </el-button>
          </div>
        </div>
      </template>

      <div class="image-grid">
        <div v-for="(image, index) in filteredImages" :key="index" class="image-item"
          :class="{ 'selected': selectedImages.includes(image) }">
          <el-image :src="image.src" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
            :preview-src-list="filteredImages.map(img => img.src)" show-progress preview-teleported
            :initial-index="index" fit="cover" />
          <div class="image-info">
            <p>{{ image.alt }}</p>
          </div>
          <div class="image-actions">
            <el-checkbox-group v-model="selectedImages">
              <el-checkbox :value="image" @click.stop />
            </el-checkbox-group>
            <el-button type="primary" size="small" @click.stop="downloadImage(image.src)">
              下载
            </el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 网页源代码弹窗 -->
    <el-dialog 
      v-model="sourceDialogVisible" 
      title="网页源代码" 
      width="70%"
      top="5vh"
    >
      <el-card class="source-card" v-if="pageSource">
        <template #header>
          <div class="card-header">
            <span>网页源代码</span>
            <div class="header-actions">
              <el-button type="primary" size="small" @click="showSource = !showSource">
                {{ showSource ? '隐藏源代码' : '显示源代码' }}
              </el-button>
              <el-button type="success" size="small" @click="openSourceDialog">
                查看源代码
              </el-button>
              <el-button type="warning" size="small" @click="extractImgTagsFromSource">
                提取 img 标签
              </el-button>
            </div>
          </div>
        </template>

        <div v-show="showSource" class="source-content">
          <pre class="html-source">{{ pageSource }}</pre>
        </div>
      </el-card>
      <template #footer>
        <el-button @click="sourceDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="copySource">复制内容</el-button>
      </template>
    </el-dialog>

    <!-- 原始img标签弹窗 -->
    <el-dialog 
      v-model="tagsDialogVisible" 
      :title="'原始 img 标签列表 (' + rawImgTags.length + '个)'" 
      width="70%"
      top="5vh"
    >
      <!-- 原始 img 标签列表卡片 -->
      <el-card class="tags-card" v-if="rawImgTags.length > 0">
        <template #header>
          <div class="card-header">
            <span>原始 img 标签列表 ({{ rawImgTags.length }}个)</span>
            <div class="header-actions">
              <el-button type="primary" size="small" @click="copyAllTags(rawImgTags)">
                复制所有标签
              </el-button>
              <el-button type="primary" size="small" @click="openTagsDialog">
                查看标签列表
              </el-button>
            </div>
          </div>
        </template>

        <div class="tags-list">
          <el-collapse>
            <el-collapse-item v-for="(tag, index) in paginatedTags" :key="index" :title="`标签 ${index + 1}`">
              <div class="tag-content">
                <div class="tag-info">
                  <pre class="html-tag">{{ tag }}</pre>
                  <div class="tag-actions">
                    <el-button type="primary" size="small" @click="copyTag(tag)">
                      复制标签
                    </el-button>
                  </div>
                </div>
                <div class="tag-preview">
                  <el-image :src="getImgSrc(tag)" fit="contain" :preview-src-list="[getImgSrc(tag)]">
                    <template #error>
                      <div class="image-error">
                        <el-icon>
                          <Picture />
                        </el-icon>
                        <span>图片加载失败</span>
                      </div>
                    </template>
                  </el-image>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>

          <!-- 添加分页组件 -->
          <div class="pagination-container">
            <el-pagination
                v-model:current-page="currentPage"
                :page-size="pageSize"
                :total="rawImgTags.length"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="pageSize = $event"
                @current-change="handlePageChange"
            />
          </div>
        </div>
      </el-card>
      <template #footer>
        <el-button @click="tagsDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="copyAllTags(rawImgTags)">复制内容</el-button>
      </template>
    </el-dialog>
    <el-dialog
      v-model="imagesUrlListDialog"
      title="url列表"
      width="70%"
      top="5vh"
      @open="fetchImagesList"
    >
      <el-card class="url-list-card" >
        <el-form ref="form" :inline="true" :model="formData" label-width="90px">
          <el-form-item label="图片描述">
            <el-input v-model="formData.alt" placeholder="请输入图片描述"></el-input>
          </el-form-item>
          <el-form-item label="图片链接">
            <el-input v-model="formData.href" placeholder="请输入图片链接"></el-input>
          </el-form-item>
          <el-form-item label="页面标识">
            <el-input v-model="formData.page" placeholder="请输入页面标识"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-select v-model="formData.orderBy" clearable placeholder="请选择排序字段" style="width: 120px;">
              <el-option
                  v-for="item in columns"
                  :key="item.dataIndex"
                  :label="item.title"
                  :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="排序方式">
            <el-radio-group v-model="formData.order">
              <el-radio label="asc">升序</el-radio>
              <el-radio label="desc">降序</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图片地址">
            <el-button @click = "fetchImagesList" > 查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
            :data="imageUrlList"
            border
            style="width: 100%"
            v-loading="loading"
            @row-click="handleRowClick"
        >
          <el-table-column type="selection" width="50" />
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="alt" label="图片描述" />
          <el-table-column prop="href" label="图片链接" />
          <el-table-column prop="page" label="页面标识" />
          <el-table-column prop="src" label="源地址" >
            <template #default="scope">
              <el-image :src="scope.row.src" style="width: 158px; height: 237px" fit="cover" />
            </template>
          </el-table-column>
          <el-table-column prop="timestamp" label="时间戳" width="180">
            <template #default="scope">
              {{ new Date(scope.row.timestamp).toLocaleString() }}
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
              v-model:current-page="urlListParams.page"
              v-model:page-size="urlListParams.size"
              :page-sizes="[10, 20, 50, 100]"
              :total="urlListParams.totalPages"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>

      </el-card>
    </el-dialog>

  </div>
</template>

<style scoped>
/* 布局和容器样式 */
.image-crawler-container {
  padding: 20px;
}

/* 卡片通用样式 */
.el-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 表单区域样式 */
.form-card {
  :deep(.el-form-item) {
    margin-bottom: 18px;
  }
}

.selector-input-container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.selector-input {
  flex: 1;
}

.attributes-config {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* 源代码展示区域 */
.source-content {
  max-height: 500px;
  overflow: auto;
  background: #f5f7fa;
  border-radius: 4px;

  .html-source {
    margin: 0;
    padding: 15px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    color: #333;
  }
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.image-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  }

  &.selected {
    border: 2px solid var(--el-color-primary);
  }

  .image-info {
    padding: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 1;
    /* 修改为默认显示 */
  }

  .image-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: rgba(243, 243, 248, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 1;
    /* 修改为默认显示 */

    .el-checkbox {
      margin-right: 8px;
    }
  }
}

/* 标签列表样式 */
.tags-list {
  max-height: 500px;
  overflow: auto;

  .tag-content {
    display: flex;
    gap: 20px;
    padding: 10px;

    .tag-info {
      flex: 1;
      min-width: 0;
    }

    .tag-preview {
      width: 200px;
      height: 200px;
      border: 1px solid var(--el-border-color-light);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--el-bg-color-page);

      .el-image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  gap: 8px;

  .el-icon {
    font-size: 24px;
  }
}

/* 弹出框内容样式 */
.selector-help,
.selector-examples {
  padding: 10px;

  h4 {
    margin-top: 0;
  }

  .tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;

    li {
      margin: 5px 0;
      color: var(--el-text-color-regular);
    }
  }
}

.example-list {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .example-item {
    padding: 10px;
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: var(--el-color-primary-light-9);
      border-color: var(--el-color-primary);
    }

    .example-value {
      font-family: monospace;
      font-size: 13px;
      color: var(--el-color-primary);
      margin-bottom: 5px;
    }

    .example-description {
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }
  }
}

.el-image-viewer__wrapper {
  z-index: 9000;
  /* 确保图片查看器在最上层 */
}

/* 添加分页容器样式 */
.pagination-container {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  background-color: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-light);
  position: sticky;
  bottom: 0;
}

/* 添加弹窗内容样式 */
.dialog-content {
  max-height: 70vh;
  overflow: auto;
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
